<template>
    <div class="login">
        <el-card class="box-card">
            <h2>酬金管理系统</h2>
            <p>
                <el-input prefix-icon="el-icon-user"  v-model="userInfo.userName" placeholder="请输入用户名"></el-input>
            </p>
            <p>
                <el-input prefix-icon="el-icon-unlock" placeholder="请输入密码" v-model="userInfo.pwd" show-password></el-input>
            </p>
            <p>
                <el-button type="primary" @click="userLogin">登录</el-button>
            </p>
            <div class="regPwd">
                <p class="reg">
                <span><router-link to="/register">立即注册</router-link></span> 
                </p>
                <p class="fgtPwd">
                    <span><router-link to="/forget">忘记密码</router-link></span> 
                </p>
            </div>
        </el-card>

    </div>

</template>

<script>
export default {
    name:"Login",
    data(){
        return{
            userInfo: {
            userName: '',
            pwd: '',
            }
        }
    },
    methods:{
        userLogin() {
            if(this.userInfo.userName.length==0){
                this.$message({
                    duration:1000,
                    message: '请输入用户名',
                    type: 'error'
                });
            }else if(this.userInfo.pwd.length==0){
                this.$message({
                    duration:1000,
                    message: '请输入密码',
                    type: 'error'
                });
            }else{
                // this.$api.login.RoleList
                this.$axios.post('api/login',{
                    userName : this.userInfo.userName,
                    password : this.userInfo.pwd
                }).then((res)=>{
                    let result = res.data
                    console.log(result)
                    console.log(result.data);
                    if(result.code==200){
                        localStorage.setItem('token',result.data.uuId);
                        this.$store.dispatch('userData',result.data)
                        console.log(this.$store.state.userInfo)
                        this.$router.push('home')
                    }else{
                        this.$message({
                            duration:1500,
                            message: result.msg,
                            type: 'error'
                        });
                    }
                    
                }).catch((err)=>{
                    console.log(err);
                    this.$message({
                        duration:1500,
                        message: '请求出错',
                        type: 'error'
                    });
                })
            }
      },
    }
}

</script>

<style scoped>
a{
    color: black;
    text-decoration: none;
    font-size: 13px;
}
.regPwd{
    overflow: hidden;
    margin-top: 13px;
}
.reg{
    float: right;
    text-align: right;
}
.fgtPwd {
    float: left;
    text-align: left;
}
h2{
    font-size: 30px;
    margin: 15px 0;
}
 .login{
    padding-top: 100px;
     box-sizing: border-box;
     width: 100%;
     height: 100%;
     background-image: linear-gradient(
    45deg
    , rgba(194, 233, 221, 0.5) 1%, rgba(104, 119, 132, 0.5) 100%), linear-gradient(
    -45deg
    , #494d71 0%, rgba(217, 230, 185, 0.5) 80%);

 }
    .el-input {
        margin: 12px 0;
    }
    .el-button{
        margin-top: 12px;
        width: 100% !important;
    }

  .box-card {
     width: 450px;
     /* height: 400px; */
     margin: 0 auto;
  }
  .el-button{
      width: 80px;
      height: 45px;
  }
</style>